gulp使用
1、准备工作
  确保全局安装了gulp如没有，则安装
  npm install --global gulp 或者
  npm install gulp -g
  任意目录新建文件夹命名为demo
  在当前目录下执行
  npm init
  会生成一个package.json文件
2、安装依赖
  安装gulp到当前项目（防止全局 gulp 升级后与此项目 gulpfile.js 代码不兼容）
  npm install gulp --save-dev
  使用—save-dev，将通知计算机在package.json中添加gulp依赖。
  此时打开 package.json 会发现多了如下代码
  "devDependencies": {
    "gulp": "^3.9.1"
  }
  声明此项目的开发依赖 gulp
3、继续安装开发依赖
  npm install gulp-uglify gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-minify-css gulp-autoprefixer gulp-less gulp-ruby-sass gulp-imagemin gulp-util --save-dev
  命名会在package.json里面添加依赖项，分享代码时node_modules可删除，通过 npm install 即可安装所有依赖
4、设计目录结构
  我们将文件分为2类，一类是源码，一类是编译压缩后的版本。文件夹分别为 src 和 dest。
  dest/ 目录下的文件都是根据 src/ 下所有源码文件构建而成。
  src下面创建css/js/img/sass等常用文件夹
  在根目录下创建gulpfile.js
5、gulp-util 让命令行输出的文字带颜色
  在gulpfile.js中写入
  var gulp = require('gulp');
  // 先去node_modules中查找gulp包，找不到就去全局环境中查找，找到后赋值给gulp变量。
  var gutil = require('gulp-util');//使用gulp-util
  // 通过gulp.task创建一个任务，default 为任务名
  gulp.task('default', function () {
    // gulp-util 的一些配置
    gutil.log('message')
    gutil.log(gutil.colors.red('error'))
    gutil.log(gutil.colors.green('message:') + "some")
  })
6、运行gulp
  6.1 说明：命令提示符执行gulp 任务名称；
  6.2 编译less：命令提示符执行gulp testLess；
  6.3 当执行gulp default或gulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]。

7、技巧
  例如想要通过文件名排除某些文件的时候，就可以这样：
  gulp.src('css/**/!(_)*'); // 排除以_开头的文件、

最后：gulp 官网 http://gulpjs.com/

<script>
// 针对 seajs 压缩
gulp.task('minify-js', function() {
  var config = {
    mangle: {except: ['define', 'require', 'module', 'exports']},
    compress: false
  };
  return gulp.src('build/public/**/*.js')
             .pipe(uglify(config))
             .pipe(gulp.dest('build/public'));
});

压缩页面JS
var gulp = require('gulp');
var cmdPack = require('gulp-cmd-pack');
var combo = require('gulp-seajs-combo');
var uglify = require('gulp-uglify');
//var uglify = require('gulp-uglify');
gulp.task('handleScripts', function () {
    gulp.src('js/**/*.js')
         .pipe(uglify({
             //mangle: true,//类型：Boolean 默认：true 是否修改变量名
             mangle: { except: ['require', 'exports', 'module', '$'] }//排除混淆关键字
         }))
        .pipe(gulp.dest('dist/js/'));
    //gulp.src(['./Scripts/main.js'])
    //    .pipe(cmdPack({/
    //        mainId: "Scripts/",
    //        base: 'Scripts/'
    //    }))
    //.pipe(concat("all.js"))
    //.pipe(combo())
    //.pipe(gulp.dest('Scripts/dest/'));
});
gulp.task('default', ['handleScripts']);
</script>

gulp-useref 插件使用
<html>
<head>
    <!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
    <!-- endbuild -->
</head>
<body>
    <!-- build:js scripts/combined.js -->
    <script type="text/javascript" src="scripts/one.js"></script>
    <script type="text/javascript" src="scripts/two.js"></script>
    <!-- endbuild -->
</body>
</html>

/*==========================================  分割线  =================================================*/
<script>
// 操作笔记
/*
  gulp 执行依赖
*/
var gulp = require('gulp'),
    minifyCss = require('gulp-minify-css'),        // 压缩 css
    autoprefixer = require('gulp-autoprefixer'),   // 给 css 代码加入兼容后缀
    jshint = require('gulp-jshint'),               // 检测 js 语法插件
    uglify = require('gulp-uglify'),               // 压缩 js 文件
    clean = require('gulp-clean'),                 // 删除文件（用在执行任务前）
    rev = require('gulp-rev'),                     // 版本控制 比较重要的一点：静态服务器需要配置静态资源的过期时间为永不过期。
    concat = require('gulp-concat'),               // 文件合并
    revReplace = require('gulp-rev-replace'),      // 配合 gulp-rev 使用，拿到生成的 manifest.json 后替换对应的文件名称。
    useref = require('gulp-useref'),               // html 引入的 css js 文件合并，但是它不负责代码压缩。 而且要注意引入文件格式
    revCollector = require('gulp-rev-collector'),  // 配合 gulp-rev 使用，拿到生成的 manifest.json 后替换html模板中的链接.
    htmlmin = require('gulp-htmlmin'),             // 压缩页面 html
    imagemin = require('gulp-imagemin');           // 压缩图片
/*
    gulp 操作 文件夹
*/
// 删除文件夹
gulp.task('clean',function(){
    return gulp.src('dist',{read:false}).pipe(clean());
});

/*
    gulp 操作 html
*/
// 压缩html
gulp.task('htmlmin', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值
        removeEmptyAttributes: true,//删除所有空格作属性值
        removeScriptTypeAttributes: true,//删除  script的type="text/javascript"
        removeStyleLinkTypeAttributes: true//删除<style>和<link>的type="text/css"
        // minifyJS: true,//压缩页面JS
        // minifyCSS: true//压缩页面CSS
    };
    return gulp.src('src/html/**/*.html')
        //.pipe(useref()) // 合并html里面的css、js文件 html内添加相应的格式
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/html'));
});
// 通过hash来精确定位到html模板中需要更改的部分,然后将修改成功的文件生成到指定目录
// 如果使用 seajs 不要使用rev 修改 js 文件版本
gulp.task('rev', ['clean','css'], function(){
    return gulp.src(['dist/rev/**/*.json','src/html/**/*.html'])
    .pipe( revCollector() ) // 如果修改了内容再次压缩，再次执行rev命令发现.html文件里面文件名并未并成功替换 revCollector({replaceReved:true}) //一定要加上这一句，不然不会替换掉上一次的值
    .pipe(gulp.dest('dist/html/'));
});

/*
    gulp 操作 css
*/
// css 文件压缩
gulp.task('css',function(){
    return gulp.src('src/css/**/*.css')
    .pipe(autoprefixer({
      browsers: 'last 2 versions' // 添加后缀
    }))
    .pipe(minifyCss())
    .pipe(gulp.dest('dist/css/')); // 压缩css
});
// css 文件压缩合并
gulp.task('css',function(){
    return gulp.src('src/css/**/*.css')  // 合并指定文件目录 gulp.src(['./css/wap_v3.1.css', './css/wap_v3.1.3.css'])
    .pipe( concat('main.min.css') ) // 将以上css文件合并成main.min.css
    .pipe(autoprefixer({
      browsers: 'last 2 versions' // 添加后缀
    }))
    .pipe(minifyCss())
    .pipe(gulp.dest('dist/css/')); // 压缩css
});
// css 文件压缩、更改版本号，并通过rev.manifest将对应的版本号用json表示出来
gulp.task('css',function(){
    return gulp.src('src/css/**/*.css')
    //.pipe( concat('wap.min.css') )
    .pipe(autoprefixer({
      browsers: 'last 2 versions' // 添加后缀
    }))
    .pipe(minifyCss())
    .pipe(rev()) // 加版本号
    .pipe(gulp.dest('dist/css/')); // 压缩css
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/css/rev'));
});

/*
  gulp 操作 js
*/
// js文件压缩，更改版本号，并通过rev.manifest将对应的版本号用json表示出
gulp.task('js',function(){
    return gulp.src('src/js/*.js')
    //.pipe( concat('wap.min.js') ) // 合并 js
    .pipe(jshint())  // 检测 js
    .pipe(uglify({
        //mangle: true,//类型：Boolean 默认：true 是否修改变量名
        mangle: { except: ['define', 'require', 'exports', 'module', '$'] }//排除混淆关键字
    })) // 压缩 js
    .pipe(rev()) // js 添加版本号
    .pipe(gulp.dest('dist/js/')) // 输出 js 目录
    .pipe(rev.manifest())  // 生成 manifest json 文件
    .pipe(gulp.dest('dist/js/rev')); // 将 文件 放置的目录
});

/*
  gulp 操作图片
*/
// 普通压缩
gulp.task('imagemin', function () {
    return gulp.src('src/img/**/*.{png,jpg,gif,ico}')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'));
});
// 压缩图片并加入版本号
gulp.task('imagemin', function () {
    return gulp.src('src/img/**/*.{png,jpg,gif,ico}')
        .pipe(imagemin())
        .pipe(rev()) // 加版本号
        .pipe(gulp.dest('dist/img'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('dist/rev/img'));
});
// 更多配置
gulp.task('imagemin', function () {
    return gulp.src('src/img/**/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 3, //类型：Number  默认：3  取值范围：0-7（优化等级）值越大压缩的越多
            progressive: true, //类型：Boolean 默认：false 连续的 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest('dist/img'));
});
// 深度压缩
pngquant = require('imagemin-pngquant');
gulp.task('imagemin', function () {
    return gulp.src('src/img/**/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
            use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
        }))
        .pipe(gulp.dest('dist/img'));
});
// 只压缩修改的图片
cache = require('gulp-cache');
gulp.task('imagemin', function () {
    return gulp.src('src/img/**/*.{png,jpg,gif,ico}')
        .pipe(cache(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        })))
        .pipe(gulp.dest('dist/img'));
});

/*
    gulp 启动任务
*/
gulp.task('default',['clean','css']);

</script>










<!-- 一些收集资料 -->
<script>
  var gulp = require('gulp'),　　　　　　　　　　　　　
      compass = require('gulp-compass'),          // compass编译Sass, 生成雪碧图
      sass = require('gulp-sass'),                // sass编译
      sourcemaps = require('gulp-sourcemaps'),    // sass地图
      rename = require('gulp-rename'),            // 重命名文件
      jshint = require('gulp-jshint'),            // JS语法检测
      uglify = require('gulp-uglify'),            // JS丑化
      concat = require('gulp-concat'),            // JS拼接
      imagemin = require('gulp-imagemin'),        // 图片压缩
      cache = require('gulp-cache'),              // 缓存通知
      connect = require('gulp-connect'),          // web服务
      minifycss = require('gulp-minify-css'),     // 压缩CSS
      cssver = require('gulp-make-css-url-version'),    // css文件引用URL加版本号
      clean = require('gulp-clean'),              // 清空文件夹
      notify = require('gulp-notify'),            // 更新通知
      rev = require('gulp-rev-append'),           // html添加版本号
      browserSync = require('browser-sync'),      // 浏览器同步
      reload = browserSync.reload;                // 自动刷新
</script>